<template>
	<view class="index-page" style="padding: 0;">
		<view class="top-search">
			<image @click="back" class="left-img" src="https://qiniu-cdn.maeiyun.com/imgs/massage/left.png" mode=""></image>
			
			<view class="input-view">
				<liu-data-select elementId="data-select2" :dWidth="100" :dataList="range" @change="change">
					<view id="data-select2">{{typename}}</view>
				</liu-data-select>
				<image class="xia-icon" src="https://qiniu-cdn.maeiyun.com/imgs/index/sxia.png" mode=""></image>
				<view class="lines"></view>
				<uni-icons style="line-height: 30px;" type="search" size="20" color="#D1D3D6" />
				<input confirm-type="search" class="nav-bar-input" type="text"  v-model="keyname" placeholder="输入搜索关键词"
					placeholder-class="placestyle">
				<view class="search-btn" @click="handleSerach(0)">搜索</view>
			</view>
		</view>
		<view class="box-content">
			<view class="technician-search-hot">
				<image class="hot-bg" src="https://qiniu-cdn.maeiyun.com/imgs/massage/fujinjishi.png" mode=""></image>
				<view class="all-btn" @click="toalllist">
					全部<uni-icons type="forward" size="14"></uni-icons>
				</view>
			</view>
			<view class="technician-search-recommend-list">
				<view class="item-technician" v-for="(item,index) in massageList" :key="index"
					@click="toTechnicianDetails(item)">
					<image :src="item.work_clothes_image" mode="aspectFill"></image>
					<view class="bottom-text">{{item.technician_nickname || item.real_name}}</view>
				</view>
			</view>
			<view class="history-search">
				<view class="title">历史搜索</view>
				<uni-icons type="trash-filled" size="18" @click="clearHistory"></uni-icons>
			</view>
			<view class="search-resoult-list">
				<view class="item-resoult" v-if="item.value" v-for="(item,index) in list" @click="tosearch(item,1)" :key="index">{{item.value}}</view>
			</view>
			<!-- <view class="history-search">
				<view class="title">热门搜索</view>
			</view>
			<view class="search-resoult-list">
			</view> -->
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'//引入mapState
	export default {
		computed: {
			...mapState({'userLocation':'userLocation'}),
		},
		data() {
			return {
				list: [],
				massageList: [],
				lat:"",
				lng:"",
				value: 0,
				name1:'',
				// range: ['电影','按摩','酒店','景区','技师'],
				range: ['按摩','技师'],
				keyname:"",
				typename:'按摩'
			}
		},
		onLoad() {
			this.getMassageList()
		},
		onShow() {
			const list = uni.getStorageSync('searchHistroy')
			try {
				const value = uni.getStorageSync('searchHistroy');
				if (value) {
					this.list = JSON.parse(value)
				}
			} catch (e) {
				// console.log(e);
			}
			
		},
		methods: {
			handleSerach(type){
				if(this.typename == '电影'){
					uni.navigateTo({
						url:'/otherpages/search/serachType/moveList?queryText='+this.keyname
					})
				}else if(this.typename == '按摩'){
					uni.navigateTo({
						url:'/otherpages/search/serachType/massage?queryText='+this.keyname
					})
				}else if(this.typename == '酒店'){
					uni.navigateTo({
						url:'/otherpages/search/serachType/hotelList?queryText='+this.keyname
					})
				}else if(this.typename == '景区'){
					uni.navigateTo({
						url:'/otherpages/search/serachType/scenicList?queryText='+this.keyname
					})
				}else if(this.typename == '技师'){
					uni.navigateTo({
						url:'/otherpages/technician/technicianList?key='+this.keyname
					})
				}
				if(type == 0 && this.keyname){
					var obj = {
						type:this.typename,
						value:this.keyname
					}
					this.addHistory(obj)
				}
				
			},
			back(){
				uni.navigateBack()
			},
			change(e){
				this.typename = e
			},
			getLocation(){
				var that = this
				uni.showLoading({
					title: '加载中'
				});
				uni.getLocation({
					type: 'gcj02',
					altitude:true,
					geocode:true,
					success: function (res) {
						uni.hideLoading();
						that.lat = res.latitude
						that.lng = res.longitude
						that.getMassageList()
					}
				})
			},
			toalllist(){
				uni.navigateTo({
					url:'/otherpages/search/searchDetail?type=1'
				})
			},
			toTechnicianDetails(item) {
				uni.navigateTo({
					url: '/otherpages/technician/technician?id=' + item.id
				})
			},
			addHistory(obj) {
				this.list.unshift(obj)
				uni.setStorageSync('searchHistroy', JSON.stringify(this.list))
			},
			clearHistory() {
				//显示模态弹窗,这里同时有确定和取消按钮,类似于一个API整合了html中：alert、confirm。
				this.$util.modal('是否清除历史记录',()=>{
					uni.removeStorageSync('searchHistroy')
					this.list = []
				},'',false)
			},
			tosearch(item){
				this.typename  = item.type
				this.keyname = item.value
				this.handleSerach(1)
				
			},
			searchValue(data) {
				this.addHistory(data)
			},
			getMassageList() {
				let that = this
				this.request.httpTokenRequest({
					url: "service/getTechnicianByService",
					method: "get"
				}, {
					lat:this.userLocation.latitude,
					lng:this.userLocation.longitude
				}).then(res => {
					if (res.code == 0) {
						that.massageList = res.data.data
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			}
		}
	}
</script>

<style lang="scss" scoped> 
	//
	.top-search{
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		padding-top:calc(var(--status-bar-height) + 10px);
		.left-img{
			width: 36rpx;
			height: 36rpx;
			flex: 0 0 auto;
		}
	}
	.input-view {
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
		background-color: #fff;
		height: 30px;
		border-radius: 15px;
		flex-wrap: nowrap;
		line-height: 30px;
		border: 1rpx solid #EF5233;
		padding: 0 10rpx 0 27rpx;
		height: 64rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #EF5233;
		line-height: 40rpx;
		#data-select2{
			// width: 140rpx;
			text-align: center;
		}
		.xia-icon{
			width: 14rpx;
			height: 8rpx;
			margin-left: 12rpx;
		}
		.lines{
			width: 1rpx;
			height: 30rpx;
			background-color:  #D9D9D9;
			margin: 0 28rpx;
		}
	}
	
	.nav-bar-input {
		height: 60rpx;
		line-height: 60rpx;
		width: 280rpx;
		font-size: 14px;
		background-color: #fff;
		color: #333;
	}
	
	.placestyle {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #AEAEB0;
	}
	
	.search-btn {
		width: 103rpx;
		height: 50rpx;
		background: #EF5233;
		border-radius: 32rpx;
		backdrop-filter: blur(10px);
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 50rpx;
		/* margin-top: 7rpx; */
		margin-left: auto;
	}
	//
	.technician-search-hot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		padding: 20rpx 0 0 0;
		.hot-bg {
			width: 117rpx;
			height: 47rpx;
		}

		.all-btn {
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #000000;

		}
	}

	//
	.technician-search-recommend-list {
		margin-top: 17rpx;
		display: flex;
		align-items: center;
		flex-wrap: no-wrap;
		overflow: hidden;
		overflow-x: scroll;

		.item-technician {
			flex: 0 0 auto;
			width: 160rpx;
			height: 200rpx;
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;
			margin-right: 20rpx;

			image {
				width: 160rpx;
				height: 200rpx;
			}

			.bottom-text {
				position: absolute;
				bottom: 0;
				right: 0;
				left: 0;
				font-size: 20rpx;
				background: rgba(0, 0, 0, .6);
				color: #fff;
				text-align: center;
			}
		}

	}

	//
	.history-search {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 33rpx;

		.title {
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #08090A;
		}

	}

	//
	.search-resoult-list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 19rpx;

		.item-resoult {
			padding: 13rpx 24rpx;
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #08090A;
			background: #fff;
			border-radius: 300px;
			margin-bottom: 20rpx;
			margin-right: 10rpx;
		}
	}

	.item-resoult {
		padding: 13rpx 24rpx;
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #08090A;
		background: #fff;
		border-radius: 300px;
		text-align: center;
	}
</style>